<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>学生列表</title>
    <style>
        .table{
            text-align: center;
        }
    </style>
    <link rel="stylesheet" href="bootstrap/dist/css/bootstrap.min.css">
    <script src="bootstrap/js/jquery.min.js"></script>
    <script src="bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="vue/vue.min.js"></script>
    <script src="axios/axios.min.js"></script>
    <script src="js/vue.js"></script>

</head>
<body>
<div class="container">
    <div class="page-helper">
        <div class="panel panel-primary">
            <div class="panel-heading">
                ---------{{entity}}----------
                ---------{{selectIds}}----------
                <div class="panel-title">
                    <h3>学生列表展示</h3>
                </div>
            </div>
            <table class="table">
                <tr>
                    <td colspan="8" align="left">
                        <input type="button" value="批量删除" class="btn-sm btn-info" @click="dele()" >
                        <input type="button" value="添加学生" class="btn-sm btn-info" @click="addUI()" >
                    </td>
                </tr>
                <tr>
                    <td>
                        选项
                    </td>
                    <td>学号</td>
                    <td>姓名</td>
                    <td>性别</td>
                    <td>年龄</td>
                    <td>住址</td>
                    <td>所在班级</td>
                    <td>操作</td>
                </tr>
                <tr v-for="stud in students">
                    <td>
                        <input type="checkbox" v-model="selectIds" :value="stud.sid" >
                    </td>
                    <td>{{stud.sid}}</td>
                    <td>{{stud.sname}}</td>
                    <td>{{stud.sex}}</td>
                    <td>{{stud.age}}</td>
                    <td>{{stud.addr}}</td>
                    <td>{{stud.cid}}</td>
                    <td>{{stud.cname}}</td>

                    <td>
                        <a  class="btn btn-success btn-sm" @click="updateUI(stud)">修改</a>
                    </td>

                </tr>
                <tr>
                    <td colspan="6">
                        <!--条件查询-->
                        <form class="form-inline">
                            <input type="text" v-model="entity.sname" placeholder="学生姓名" class="form-control">
                            <input type="text" v-model="entity.addr" placeholder="学生住址" class="form-control">
                            <select v-model="entity.cid"  class="form-control">
                                <option value="0">所有班级</option>
                                <option v-for="c in classes" :value="c.cid" >{{c.cname}}</option>
                            </select>
                            <input type="button" value="查询" @click="search(page)" class="btn btn-default btn-sm">
                        </form>
                        <!--分页导航-->
                        <nav aria-label="Page navigation">
                            <ul class="pagination">
                                <li>
                                    <a href="#" aria-label="Previous">
                                        <span aria-hidden="true">&laquo;</span>
                                    </a>
                                </li>
                                <li v-for="p in totalPages" :class="p == page ? 'active' : ''">
                                    <a @click="search(p)" >{{p}}</a>
                                </li>
                                <li>
                                    <a href="#" aria-label="Next">
                                        <span aria-hidden="true">&raquo;</span>
                                    </a>
                                </li>
                            </ul>
                        </nav>


                    </td>
                </tr>
            </table>
            <div class="panel-footer text-right">
                泽林教育2000-2020.
            </div>
        </div>
    </div>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">保存学生</h4>
                </div>
                --------{{studentEntity}}--------
                <div class="modal-body">
                    <form class="form-horizontal" id="form1">
                        <input type="hidden" name="sid" id="sid">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">学生姓名</label>
                            <div class="col-sm-10">
                                <input type="text" v-model="studentEntity.sname" id="sname" class="form-control" placeholder="姓名">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">学生性别</label>
                            <div class="col-sm-10">
                                <div class="radio">
                                    <label>
                                        <input type="radio" v-model="studentEntity.sex" value="男">男
                                    </label>
                                    <label>
                                        <input type="radio" v-model="studentEntity.sex" value="女" >女
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">学生年龄</label>
                            <div class="col-sm-10">
                                <input type="text" v-model="studentEntity.age" class="form-control" name="age" placeholder="年龄">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">学生住址</label>
                            <div class="col-sm-10">
                                <input type="text" v-model="studentEntity.addr" class="form-control" name="addr" placeholder="住址">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">所在班级</label>
                            <div class="col-sm-10">
                                <select v-model="studentEntity.cid" id="cid" class="form-control">
                                    <option value="0">所有班级</option>
                                    <option v-for="c in classes" :value="c.cid">{{c.cname}}</option>
                                </select>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" @click="save()">保存</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script>
    new Vue({
        el:'.container',
        data:{
            students:[],
            classes:[],
            entity:{},
            studentEntity:{},
            page:1,  //当前页
            pageSize:3,  //每页大小
            totalPages:0, //总页数
            selectIds:[],  //
        },
        mounted(){ //视图加载完毕就执行下面的方法
            //1.列表学生
           /* this.findAll();*/
            //2.分页查询
            //this.findByPage(this.page,this.pageSize);
            //3.列表班级
            this.findAllClasses();
            //4.条件查询
            this.search(this.page);
        },
        methods:{
            //1.列表学生
            findAll(){
                axios.get("student/findall").then(response=>{
                   this.students = response.data;
                })
            },
            //2.分页查询
            findByPage(page,pageSize){
                this.page=page;
                axios.get("student/findByPage?page="+page + "&pageSize=" +pageSize).then(response=>{
                    this.students = response.data.rows;  //设置每页的记录集合
                    this.totalPages = response.data.totalPages; //设置总页数
                })
            },
            //3.查询所有班级
            findAllClasses(){
                axios.get("class/findall").then(response=>{
                    this.classes=response.data;
                })
            },
            //4.条间查询
            search(p){
                this.page=p;
                axios.post("student/search?page=" + this.page +"&pageSize=" + this.pageSize,this.entity).then(response=>{
                    this.students=response.data.rows;
                    this.totalPages = response.data.totalPages;
                })
            },
            //5.删除学生
            dele(){
              axios.get("student/dele?ids=" + this.selectIds).then(response=>{
                   if(response.data.success){
                       this.search(this.page);
                }else{
                       alert(response.data.message)
                }

              })
            },
            //6. 打开添加学生页面
            addUI(){
                $("#myModal").modal("show");
            },
            //8.打开更新页面
            updateUI(stud){
                $("#myModal").modal("show");
                this.studentEntity = stud;
            },
            //7.save()方法
            save(){
                //7.1判断sid是否有只，有则调用更新方法，无则添加学生
                let url ="student/add";
                if (this.studentEntity.sid){
                    url = "student/update";
                }
                axios.post(url , this.studentEntity).then(response=>{
                    if(response.data.success){
                        this.search(this.page);
                    }else{
                        alert(response.data.message)
                    }
                    $("#myModal").modal("hide");
                })

            }



        }
    })
</script>